<template>
  <div class="header">
    对话列表
    <div style="right: 0;position: fixed;margin-right: 15px;cursor: pointer" @click="showDialog">
      <PlusSquareOutlined />
    </div>
  </div>
      
    <!-- 新增对话框 -->
    <a-modal
      v-model:open="dialogVisible"
      title="新建对话"
      :width="modalWidth"
      centered
      :class="['custom-modal']"
    >
      <a-input 
        v-model:value="chatInfo.name"
        placeholder="请输入聊天名称"
        class="mobile-input"
        @pressEnter="handleOk"
      />
      <template #footer>
        <div class="modal-footer">
          <a-button key="cancel" @click="handleCancel">取消</a-button>
          <a-button key="submit" v-prevent-reclick type="primary" @click="handleOk">创建</a-button>
        </div>
      </template>
    </a-modal>
</template>

<script>
import { Modal, Input, message } from 'ant-design-vue'
import request from '@/util/request.js'

export default {
  name: "Header",
  components: {
    'a-modal': Modal,
    'a-input': Input
  },
  emits:['change-from-child'],
  computed: {
    modalWidth() {
      return window.innerWidth > 768 ? '400px' : '90%'
    }
  },
  data() {
    return {
      dialogVisible: false,
      chatName: '',
      chatInfo:{
        name:"",
        userToken:this.$store.state.userInfo.token
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleOk() {
      // if (this.chatInfo.name===""){
      //   message.error("name为空")
      //   return
      // }
      // 这里添加处理创建对话的逻辑
      request.post("/chat/edit",this.chatInfo).then(res=>{
        if (res.data.code === 200){
          message.success("创建成功")
          this.$emit("change-from-child")
          this.dialogVisible = false;
          this.chatInfo.name = '';
        }else {
          message.error(res.data.msg)
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false;
      this.chatName = '';
    }
  }
}
</script>

<style scoped>
.header {
  height: 50px;
  padding: 12px 15px;
  background: #5f84b6;
  color: white;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.search-box {
  margin-top: 8px;
  :deep(.ant-input)  {
    background: rgba(255,255,255,0.2);
    border-radius: 15px;
    color: white;
    &::placeholder {
      color: rgba(255,255,255,0.7);
    }
  }
}

/* 新增移动端适配样式 */
:deep(.custom-modal) .ant-modal-body {
  padding: 20px;
}

:deep(.mobile-input) {
  padding: 12px 15px;
  font-size: 16px;
}

:deep(.modal-footer) {
  display: flex;
  gap: 10px;
  padding: 10px 0 0;
}

:deep(.custom-modal) .ant-modal-footer {
  padding: 15px 20px;
  border-top: none;
}
</style>